<%--
  Created by IntelliJ IDEA.
  User: 25306
  Date: 2025/10/13
  Time: 下午3:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>资源详情</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/back-index.css" />
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .my-video {
            margin: 30px auto auto auto;
        }
        .bgColor {
            background: black;
        }
        .padding-0 {
            padding: 0 0 !important;
        }
        .resource-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        .resource-image {
            max-width: 100%;
            max-height: 500px;
        }
        .resource-info {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
    </style>

    <script type="text/javascript">
        $(function(){
            //返回资源列表
            $("#back").on('click', function(){
                $('#frame-id', window.parent.document).attr('src', "${pageContext.request.contextPath}/resource/findAll");
            });
        });
    </script>
</head>

<body>
<div class="panel panel-default" id="userSet">
    <div class="panel-heading">
        <h3 class="panel-title">资源详情</h3>
    </div>
    <div>
        <input type="button" value="返回资源列表" class="btn btn-success" id="back" style="margin: 5px 15px 5px 0px;float: right;" />
    </div>


    <c:if test="${resource != null}">
        <div class="resource-info">
            <div class="row">
                <div class="col-md-2">资源名称:</div>
                <div class="col-md-10">${resource.title}</div>
            </div>
            <div class="row">
                <div class="col-md-2">资源类型:</div>
                <div class="col-md-10">${resource.fileType == 'mp4' ? '视频' : 'pdf'}</div>
            </div>
            <div class="row">
                <div class="col-md-2">上传时间:</div>
                <div class="col-md-10">${resource.createDate}</div>
            </div>
        </div>


        <div class="resource-container">

            <c:if test="${resource.fileType == 'mp4'}">
                <div class="container-fluid padding-0 bgColor" style="width: 100%;">
            <video style="width: 100%; height:470px;" controls="controls">
            <source src="${pageContext.request.contextPath}${resource.path}" type="video/mp4">
            </video>
                </div>
            </c:if>

            <c:if test="${resource.fileType == 'pdf'}">
                <img src="${pageContext.request.contextPath}${resource.path}" alt="${resource.name}" class="resource-image" />
            </c:if>

        </div>
    </c:if>


    <c:if test="${empty resource}">
        <div style="text-align: center; padding: 100px;">
            <p>未找到该资源</p>
        </div>
    </c:if>
</div>

</body>
</html>